<{include file="top.html" }>
    <link href='<{$preStaticUrl}>Wap/css/contribute.css?v=<{$resVersion}>' rel='stylesheet' type='text/css'>
    <link href='<{$preStaticUrl}>cropbox/cropbox.css?v=<{$resVersion}>' rel='stylesheet' type='text/css'>

<script>
/**
 * 文本框根据输入内容自适应高度
 * @param                {HTMLElement}        输入框元素
 * @param                {Number}                设置光标与输入框保持的距离(默认0)
 * @param                {Number}                设置最大高度(可选)
 */
var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                        elem.addEventListener ?
                                elem.addEventListener(type, callback, false) :
                                elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                        var val = elem.currentStyle[name];

                        if (name === 'height' && val.search(/px/i) !== 1) {
                                var rect = elem.getBoundingClientRect();
                                return rect.bottom - rect.top -
                                        parseFloat(getStyle('paddingTop')) -
                                        parseFloat(getStyle('paddingBottom')) + 'px';        
                        };

                        return val;
                } : function (name) {
                                return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function () {
                var scrollTop, height,
                        padding = 0,
                        style = elem.style;

                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;

                if (!isFirefox && !isOpera) {
                        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                        if (maxHeight && elem.scrollHeight > maxHeight) {
                                height = maxHeight - padding;
                                style.overflowY = 'auto';
                        } else {
                                height = elem.scrollHeight - padding;
                                style.overflowY = 'hidden';
                        };
                        style.height = height + extra + 'px';
                        scrollTop += parseInt(style.height) - elem.currHeight;
                        document.body.scrollTop = scrollTop;
                        document.documentElement.scrollTop = scrollTop;
                        elem.currHeight = parseInt(style.height);
                };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        change();
};
</script>
	<style>
        
	.maindash {border: 1px dashed #37cbbb; background: #ececec; opacity: 0.7;position:static;}
	.dash { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #37cbbb; };
	.maindash {border: 1px dashed #37cbbb; background: #ececec; opacity: 0.7;position:relative;}
    .footerElem {display:inline-block;line-height:4.4rem; color:white; padding:0 2rem};
	</style>

</head>
<body>
    <{include file="signBody.html"}>
    <div class="bgcolor"></div>
	<div class="content">
        <header><a class="left_link" href="javascript:history.back(-1);" ></a>投 稿</header>
        <form method="post" action="<{u(saveContribute)}>" id="contributeForm">
        <div id="contribute1">

            <div class="brick" id="head" style="margin:1rem 0 2rem 0;">
                <{if $obj.listPic}>
                <div class="picture_box">
                    <img id="headPreview" src="<{$obj.listPic}>">
                    <input type="hidden" name="listPic" id="listPic" value="<{$obj.listPic}>">
                    <a href="javascript:void(0);" class="a-upload">
                        <input type="file" id="headPic">选取图片
                    </a>
                </div>
                <{else}>
                <div class="append_box">
                    <h3>添加文章首图</h3>
                    <ul style="background: none; padding: 1rem 0;">
                        <li>
                            <input type="file" id="headPic2" style="opacity: 0;position: absolute;left:48.5%;width:5rem;height:5rem;z-index: 99">
                            <img src="<{$preStaticUrl}>Wap/images/picture.png">
                        </li>
                    </ul>
                </div>
                <{/if}>

            </div>
   			<h2><input type="text" name="title" placeholder="标题（必填）" value="<{$obj.title}>" required/></h2>
            <section class="example">
                <div class="gridly">
                    <{if count($obj.content)>0}>

                    <{*有草稿数据*}>
                    <{foreach from=$obj.content item=item}>
                    <{if $item[0] eq 1}>
                    <div class="brick dragable">
                        <a class="delete" href="javascript:void(0);"></a>
                        <p class="article_con">
                            <img src="<{$item[1]}>"/>
                            <input type="hidden" name="content[]" value="<{$item[1]}>">
                        </p>
                        <a href="javascript:void(0);" class="add-icon add"></a>
                    </div>
                    <{else}>
                    <div class="brick dragable">
                        <a class="delete" href="javascript:void(0);"></a>
                        <p class="article_con"><textarea id="t1" name="content[]" placeholder="请输入内容"><{$item[1]}></textarea></p>
                        <a href="javascript:void(0);" class="add-icon add"></a>
                    </div>
                    <{/if}>
                    <{/foreach}>
                    <script>
                        var noDraft=false;
                    </script>
                    <{else}>
                    <{*无草稿数据*}>
                    <script>
                        var noDraft=true;
                    </script>
                    <{/if}>

                </div>
            </section>

            <p class="ui-button ui-button-2"><button type="button" id="submit">确认发布</button></p>
        </div>
        </form>
    </div>



    <div class="bricksss" style="display:none" id="control">
        <div class="append_box" >
            <h3>选择添加内容</h3>
            <ul>
                <li class="add" id="add-text">
                    <img src="<{$preStaticUrl}>Wap/images/word.png" />
                    <i>文字</i>
                </li>
                <li><a href="javascript:void(0);" style="position: relative">
                        <img src="<{$preStaticUrl}>Wap/images/picture.png"  />
                        <i>图片</i>
                        <input type="file" id="selectFile" style="opacity: 0;position: absolute;left:-12px;top:-57px;width:5rem;height:7rem;z-index: 99">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id='controlHold'></div>


	<div class="hint-box" style="display:none;">
        <div class="black-bg">
            <header><a class="left_link" href="javascript:void(0);" id="imgCancel"></a>投 稿<a class="right_link" id="imgOk" href="javascript:void(0);">确定</a></header>
            <h3 class="pic-topic">移动并伸缩图片至理想画面</h3>
            <dl class="pic-con">
                <div class="container">
                    <div class="imageBox">
                        <div class="thumbBox"></div>
                        <div class="spinner" style="display: none">Loading...</div>
                    </div>
                </div>

			</dl>
            <footer style="background-color:black">
                <a class="footerElem" id="bigger" style="float:right">放大</a>
                <a class="footerElem" id="smaller">缩小</a>
            </footer>


        </div>
    </div>


</body>
</html>
<script src="<{$preStaticUrl}>Wap/js/contribute.js?v=<{$resVersion}>"></script>
<script src="<{$preStaticUrl}>cropbox/cropbox.js?v=<{$resVersion}>"></script>
<script src="<{$preStaticUrl}>layer/layer.js?v=<{$resVersion}>"></script>
<script>

    $(function(){
        $('#submit').click(function(){

            $('#submit').attr('disabled',true);
            var data=$('#contributeForm').serialize();
            $.post($('#contributeForm').attr('action'),data,function(result){
                if(result.status==0) {
                    layer.msg('发布成功。',{time:1500},function(){out()})
                }else{
                    layer.msg(result.msg,{time:1500});
                    $('#submit').removeAttr('disabled');
                }
            },'json');
        });
    });

    function out(){
        window.location="<{u('index/index')}>";
    }


    //保存草稿
    function saveDraft(){
        var data=$('#contributeForm').serialize();
        $.post("<{u(saveDraft)}>",data,function(result){
        },'json');
    }

    var distance=0;
    var cropper = null;

    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'images/avatar.png'
    }


    function changeFile(e){
        $(".hint-box").css({"display": "block"});
        var $container=$('.container');
        var $imgBox=$('.imageBox');
        $imgBox.css({'width':$container.css('width'),'height':$container.css('height')});


        var scale=1;
        switch (e.target.id){
            case 'headPic':
                scale=<{$listPicHeight}>/<{$listPicWidth}>;
                target=1;
                break;
            case 'headPic2':
                scale=<{$listPicHeight}>/<{$listPicWidth}>;
                target=2;
                break;
            default :
                scale=<{$picHeight}>/<{$picWidth}>;
                target=0;
                break;
        }
        var width=$container.width()-0;
        var height=width*scale;
        var $thumbBox=$('.thumbBox');
        $thumbBox.css({'width':width+'px','height':height+'px','margin-left':'-'+width/2+'px','margin-top':'-'+height/2+'px'});

        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    }

    $(document).ready(
            function(){
                if(noDraft){
                    $('.gridly').append($('#control').show());
                }
                $('#selectFile,#headPic,#headPic2').on('change',changeFile);
                $('#btnCrop').on('click touchend', function(){
                    var img = cropper.getDataURL();
                    $('.cropped').append('<img src="'+img+'">');
                })
                $('#bigger').on('click touchend', function(){
                    cropper.zoomIn();
                })
                $('#smaller').on('click touchend', function(){
                    cropper.zoomOut();
                })
            }
    )

</script>

